<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script><script src="../picker.js"></script><script src="../picker-city.js"></script>
      <script>
  $(function(){
    
$("#text2").picker({
        title: "你喜欢的国家",
        toolbarCloseText:'确定',
        cols: [
          {
            textAlign: 'center',
            values: [1,2,3],
            displayValues:['新西兰','美国','日本'],
          }
        ]
      });
      $("#text1").picker({
        title: "他们都喜欢什么",
        cols: [
          {
            textAlign: 'center',
            values: ['刘备', '关羽','张飞']
          },
          {
            textAlign: 'center',
            values: ['喜欢', '憎恶', '基情', '可怜']
          },
           {
            textAlign: 'center',
            values: ['吃西瓜', '吃盒饭', '喝酒']
          }
        ]
      });
      
  
      $("#date").datetimePicker({title:"选择日期",m:1});
$("#time").datetimePicker({title:"选择日期时间",min:'2015-12-10',max:'2050-10-01'});
$("#time2").picker({title:"选择时间",
        cols: [
          {
            textAlign: 'center',
            values: (function () {
                var arr = [];
                for (var i = 0; i <= 23; i++) { arr.push(i < 10 ? '0' + i : i); }
                return arr;
            })()
            
          },
          {
            textAlign: 'center',
            values:  (function () {
                var arr = [];
                for (var i = 0; i <= 59; i++) { arr.push(i < 10 ? '0' + i : i); }
                return arr;
            })(),
          }
        ]});          
$("#ssx").cityPicker({
        title: "选择省市县"
      });

 $("#ss").cityPicker({
        title: "选择省市",
        showDistrict: false
      });   
      
      
      
      

	  
	  });      
         
      </script>
</head>

<body ontouchstart style="background-color: #f8f8f8;">
<div class="page-hd">
        <h1 class="page-hd-title">
            picker为基础的弹出框
        </h1>
        <p class="page-hd-desc">使用picker,需加载picker.js,使用省市县还需要加载picker-city.js</p>
    </div>
<form id="form">
<div class="weui_cells weui_cells_form ">   
            
       <div class="weui_cell">
                <div class="weui_cell_hd"><label for="" class="weui_label">多列:</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" value="" id='text1'/>  
                </div>
              
            </div>   
        <div class="weui_cell">
                <div class="weui_cell_hd"><label for="" class="weui_label">单列:</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" value="" id='text2'/>
                    
                </div>
              
            </div>       
  
          <div class="weui_cell">
                <div class="weui_cell_hd"><label for="" class="weui_label">日期:</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" value="2016-12-10" id='date'/>
                    
                </div>
              
            </div> 
  
          <div class="weui_cell">
                <div class="weui_cell_hd"><label for="" class="weui_label">时间:</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" value="" id='time'/>
                     
                </div>
              
            </div>                
 
           <div class="weui_cell">
                <div class="weui_cell_hd"><label for="" class="weui_label">时间2:</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" value="09 12" id='time2'/>
                    
                </div>
              
            </div>  
            
            <div class="weui_cell">
                <div class="weui_cell_hd"><label for="" class="weui_label">省市县:</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" value="" id='ssx'/>
                    
                </div>
              
            </div>  
            
                      <div class="weui_cell">
                <div class="weui_cell_hd"><label for="" class="weui_label">省市:</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" value="" id='ss'/>
                    
                </div>
              
            </div>  
 
 


          
 
 
 
 </div>
 
  <div class="weui_btn_area">
        <a id="reset" href="javascript:" class="weui_btn weui_btn_primary" onclick="document.getElementById('form').reset();">重置</a>
    </div>
 </form>
 

</body>
</html>
